{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}资产总表{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        资产总表

      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">资产总表</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
    <div class="row">
    <div class="col-xs-12">

      <div class="box">
        <div class="box-header">
          <h3 class="box-title">资产总表</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="table table-bordered table-striped">
            <thead>
            <tr>
              <th>序号</th>
              <th>资产类型</th>

              <th>资产名称</th>
              <th>SN</th>
                 <th>生产商</th>
{#              <th>业务线</th>#}
              <th>状态</th>
              <th>机房</th>
              <th>购买时间</th>
{#              <th>标签</th>#}
              <th>操作</th>
            </tr>
            </thead>
            <tbody>

                {% for asset in assets %}
                <tr>
                  <td>{{ forloop.counter }}</td>
                  {% if asset.asset_type == 'server' %}
                      <td class="text-green text-bold">{{ asset.get_asset_type_display }}</td>
{#                      <td>{{ asset.server.get_sub_asset_type_display }}</td>#}
                  {% elif asset.asset_type == "networkdevice" %}
                      <td class="text-yellow text-bold">{{ asset.get_asset_type_display }}</td>
{#                      <td>{{ asset.networkdevice.get_sub_asset_type_display }}</td>#}
                  {% elif asset.asset_type == "storagedevice" %}
                      <td class="text-blue text-bold">{{ asset.get_asset_type_display }}</td>
{#                      <td>{{ asset.storagedevice.get_sub_asset_type_display }}</td>#}
                  {% elif asset.asset_type == "securitydevice" %}
                      <td class="text-red text-bold">{{ asset.get_asset_type_display }}</td>
{#                      <td>{{ asset.securitydevice.get_sub_asset_type_display }}</td>#}
                  {% endif %}
{#                    {% if asset.asset_type == 'server' %}#}
                        <td><a href="{% url 'assets:detail' asset.id %}">{{ asset.name }}</a></td>
{#                    {% else %}#}
{#                        <td>{{ asset.name }}</td>#}
{#                    {% endif %}#}
                  <td>{{ asset.sn }}</td>
                  <td>{{ asset.manufacturer }}</td>
{#                  <td>{{ asset.business_unit|default_if_none:"-" }}</td>#}
                    {% if asset.status == 0 %}
                      <td><label class="label label-success">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 1 %}
                      <td><label class="label label-warning">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 2 %}
                      <td><label class="label label-default">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 3 %}
                      <td><label class="label label-danger">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 4 %}
                      <td><label class="label label-info">{{ asset.get_status_display }}</label></td>
                    {% endif %}
                  <td>{{ asset.idc|default:"-" }}</td>
                  <td>{{ asset.purchase_day|date:"Y/m/d " }}</td>
                <td><a href="{% url 'assets:add' %}" title="添加"><i class="glyphicon glyphicon-plus"></i></a>
                    <a href="{% url 'assets:edit' asset.id %}" title="修改"><i class="glyphicon glyphicon-pencil"></i></a>
                    <a href="{% url 'assets:del_equipment' asset.id %}" onclick="return delete_data()" title="删除"><i class="glyphicon glyphicon-trash text-danger"></i></a>
                    <script language="JavaScript">
                        function delete_data() {
                            if(confirm('您确定要删除吗？')){
                                return true;
                            }else{
                                return false;
                            }
                        }
                    </script>



                </td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}

            </tbody>
            <tfoot>
            <tr>
              <th>序号</th>
              <th>资产类型</th>

              <th>资产名称</th>
              <th>SN</th>
                <th>生产商</th>
{#              <th>业务线</th>#}
              <th>状态</th>
              <th>机房</th>
              <th>购买时间</th>
{#              <th>标签</th>#}
                <th>操作</th>
            </tr>
            </tfoot>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>

    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/app.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>

    <!-- DataTable buttons -->
    <script src="{% static  'plugins/datatables/button/dataTables.buttons.min.js'%}"></script>
    <script src="{% static  'plugins/datatables/button/buttons.bootstrap.min.js'%}"></script>
    <!-- buttons 打印功能 -->
    <script src="{% static  'plugins/datatables/button/buttons.print.min.js'%}"></script>
    <!-- buttons 导出功能 -->
    <script src="{% static  'plugins/datatables/button/buttons.html5.min.js'%}"></script>
    <script src="{% static  'plugins/datatables/button/jszip.min.js'%}"></script>
    <!-- buttons 生成PDF功能 -->
{#    <script src="{% static  'plugins/datatables/button/pdfmake.min.js'%}"></script>#}
{#    <script src="{% static  'plugins/datatables/button/vfs_fonts.js'%}"></script>#}

    <!-- page script -->
    <script>
      $(function () {
        $('#assets_table').DataTable({
          "paging": true,       <!-- 允许分页 -->
          "lengthChange": true, <!-- 允许改变每页显示的行数 -->
          "searching": true,    <!-- 允许内容搜索 -->
          "ordering": true,     <!-- 允许排序 -->
          "info": true,         <!-- 显示信息 -->
          "autoWidth": false,    <!-- 固定宽度 -->
          language:{
              'sSearch':"搜索",
              "info":           "显示 _START_ 到 _END_ 页共 _TOTAL_ 条",
              "infoEmpty":      "显示 0 到 0 页共 0 条",
              "lengthMenu":     "显示 _MENU_ 条",
              "zeroRecords":    "没有匹配项",
          "paginate": {
              "first":      "First",
              "last":       "Last",
              "next":       "下页",
              "previous":   "上页"
          },
          },
          dom: '<"pull-left"B>ft<"pull-left"i>p',
        buttons: [
            {
                text: '<i class="glyphicon glyphicon-copy" title="复制"></i>',
                extend: 'copy'
            }, {
                text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
                extend: 'print'
            }, {
                text: '<i class="glyphicon glyphicon-list-alt" title="导出csv"></i>',
                extend: 'csv'
            },
        ],




{#"stripeClasses": [ 'strip1', 'strip2', 'strip3' ],#}
{#columnDefs: [#}
{#  {#}
{#        targets: -1,#}
        {#visible: false,#}
{#        sortable: false,#}
        {#data : null,#}
{#        render: function(data, type, row){#}
{#            return '<a href="" title="详情">' +#}
{#            '<i class="glyphicon glyphicon-eye-open"></i> ' +#}
{#            '</a>'+#}
{#            '<a href="/assets/edit/" data-toggle="modal" data-id="' + row.p_id +'" title="修改">' +#}
{#            '<i class="glyphicon glyphicon-pencil"></i> ' +#}
{#            '</a>'+#}
{#            '<a href="#delProject" data-toggle="modal" data-id="' + row.p_id +'" title="删除">' +#}
{#            '<i class="glyphicon glyphicon-trash text-danger"></i> ' +#}
{#            '</a>';#}
{#        }#}
{#    }#}
{#],#}



        });
        $.fn.dataTable.ext.buttons.reload = {
    text: '<i class="glyphicon glyphicon-refresh"></i>',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
    }
};


      });

    </script>
{% endblock %}